<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#wrapper {
				margin: 20px auto;
				width: 343px;
				height: 480px;
				background: url(img/bg.jpg) no-repeat;
				position: relative;
				overflow: hidden;
			}
			
			ul {
				width: 62px;
				height: 423px;
				position: absolute;
				left: 343px;
			}
			
			#up-bg {
				width: 62px;
				height: 100px;
				background: url(img/up_mod.png);
			}
			
			#up {
				width: 62px;
				height: 60px;
				background: url(img/up_pipe.png);
			}
			
			#space {
				width: 62px;
				height: 100px;
			}
			
			#down {
				width: 62px;
				height: 60px;
				background: url(img/down_pipe.png);
			}
			
			#down-bg {
				width: 62px;
				height: 104px;
				background: url(img/down_mod.png);
			}
			
			#bird {
				width: 40px;
				height: 26px;
				background: url(img/bird0.png);
				position: absolute;
				top: 198px;
				left: 50px;
				z-index: 20;
			}
			#slidr{
				position: absolute;
				top: 423px;
				z-index: 10;
				width: 9999px;
			}
			#slidr img{
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="wrapper">
			<div id="bird"></div>
			<div id="slidr">
				<img src="img/slider.jpg"/>
				<img src="img/slider.jpg"/>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//获取各个元素
		//背景外框
		var wrapper = document.querySelector("#wrapper")
			//鸟
		var bird = document.getElementById("bird")
			//围栏
		var slider = document.getElementById("slidr")
			//管道创建
		var score = 0
		//用来判断是否碰撞的状态值
		var peng = false;
		function creatPipe() {
			var rand = parseInt(Math.random() * 204);
			var ul = document.createElement("ul");
			//用来判断加分的状态值
			var status = false;
			ul.innerHTML += "<li id=up-bg style='height:" + rand + "px" + " ;'></li>";
			ul.innerHTML += "<li id=up></li>";
			ul.innerHTML += "<li id=space></li>";
			ul.innerHTML += "<li id=down></li>";
			ul.innerHTML += "<li id=down-bg style='height: " + (203 - rand) + "px" + ";'></li>";
			
			//管道移动的定时器
			var pipeTime = setInterval(function() {
				if(peng){
					clearInterval(pipeTime)
					clearInterval(weilan)
				}
				ul.style.left = ul.offsetLeft - 1 + "px";
				//管道删除
				if(ul.offsetLeft<-70){
					wrapper.removeChild(ul);
				}
				//碰撞判断
				//判断管道正好经过小鸟的上方
				if(ul.offsetLeft <= (bird.offsetWidth+bird.offsetLeft) && ul.offsetLeft >= (bird.offsetLeft-bird.offsetWidth)){
					//console.log("碰撞")
					if(bird.offsetTop<rand+60 || bird.offsetTop>rand+160-26){
						peng = true;
						clearInterval(creattime);
						clearInterval(pipeTime)
						console.log("碰撞1");
					}
				}
				if(ul.offsetLeft<(bird.offsetLeft-ul.offsetWidth)){
					if(!status){
						score+=1;
					}
					//走过之后，状态值为true
					status = true;
				}
				console.log(score)
			}, 30)
			wrapper.appendChild(ul)
		}
		creatPipe()
		//生成管道
		creattime=setInterval(function() {
			creatPipe()
		}, 6000)
		//围栏移动定时器
		weilan = setInterval(function(){	
			slider.style.left = slider.offsetLeft-1+"px"
			if(slider.offsetLeft<=-340){
				slider.style.left = 0
			}
		},30)
		//鸟的飞起来的动画
			//鸟扇翅膀的定时器
		var num = 1;
		fly = setInterval(function() {
			bird.style.backgroundImage = "url(img/bird" + num + ".png)";
			if(num == 1){
				num = 0;
			}else{
				num = 1;
			}
		},150)
		
		//小鸟下落动画
		var speed = 1
		down = setInterval(function(){
			clearInterval(fly)
			bird.style.top = bird.offsetTop+speed+"px"
			bird.style.backgroundImage = "url(img/down_bird" + num + ".png)";
			speed+=1
			if(num == 1){
				num = 0;
			}else{
				num = 1;
			}
		},100)
		
		//点击上升事件
		var up = null
		wrapper.onclick = function(){
			clearInterval(down);
			clearInterval(up);
			var speedUp = 10;
			up = setInterval(function(){
				bird.style.top = bird.offsetTop-speedUp+"px";
				bird.style.backgroundImage = "url(img/up_bird" + num + ".png)";
				speedUp-=2;
				if(speedUp<=0){
					bird.style.backgroundImage = "url(img/down_bird" + num + ".png)";
				}
				if(num == 1){
					num = 0;
				}else{
					num = 1;
				}
			},100)
		}
	</script>

</html>